<template>
  <div class="addView_main">
    <a-card title="添加硒都景点">
      <a-card
        hoverable
        class="card_message"
        v-for="item in viewListData"
        :key="item.id"
        style="margin: 0 10px"
				@click="removeItem(item)"
      >
        <template #cover>
          <img :src="item?.imageUrl" />
        </template>
        <a-card-meta :title="item?.name">
          <template #description>
            <p>{{ item?.level }}</p>
            <p>地址：{{ item?.address }}</p>
            <span>{{ item?.description }}</span>
          </template>
        </a-card-meta>
      </a-card>
    </a-card>
    <a-modal
      v-model:visible="dialogStatu"
      title="删除美食"
      @ok="handleOk"
      destroyOnClose
    >
      你确定要删除
      <span style="color: #ffcc33">{{ removeList?.name }}</span> 吗？
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { viewList, deleteView } from "@/utils/fetch/api";
import { PlusCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {
    PlusCircleOutlined,
  },
  setup() {
    const loading = ref<Boolean>(false);
    const viewListData = ref<any>();
    const refresh = async () => {
      try {
        const data = await viewList({ pageNum: 1 });
        viewListData.value = data.data.data;
      } catch (err) {
        console.error(err);
      }
    };
    onMounted(() => {
      loading.value = true;
      refresh();
      loading.value = false;
    });

		const dialogStatu = ref<boolean>(false);
		const removeList = ref<any>();
    const removeItem = (item: any) => {
			dialogStatu.value=true
      removeList.value = item;
    };
		const handleOk = async() => {
			try{
				const data = await deleteView(removeList.value.id)
				refresh();
				message.success("删除成功！");
				setTimeout(()=>{
					dialogStatu.value=false
				},1000)
			}catch(err){
				console.error(err)
			}
		};
    return {
      loading,
      viewListData,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
			dialogStatu,
			removeItem,
      handleOk,
			removeList
    };
  },
});
</script>

<style lang="less" scoped>
.addView_main {
  width: 100%;
  height: 100%;
  background: white;
  /deep/.ant-card-head-title {
    font-size: 3em;
  }
  .card_message {
    width: 30em;
    float: left;
  }
  .card_message::after {
    content: "";
    clear: both;
  }
  .card_add {
    width: 30em;
    display: inline-block;
    margin: 0 10px;
    height: 25em;
    color: #eee;
    float: left;
    /deep/.ant-card-body {
      width: 100%;
      height: 100%;
    }
  }
  .card_add:hover {
    color: rgb(134, 133, 133);
  }
  .card_add::after {
    content: "";
    clear: both;
  }
}
</style>
